<script setup lang="ts">
import { onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps<{
  chartData: any
}>()

const emit = defineEmits<{
  (event: 'handelUpData', ...args: any[]): void
}>()

const createChart = () => {
  const myChart = echarts.init(document.getElementById(props.chartData.name))
  const option = {
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      left: 'center',
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: props.chartData.data,
      },
    ],
  }
  // 绘制图表
  myChart.setOption(option)
}
onMounted(() => {
  setTimeout(() => {
    createChart()
  }, 500)
})

const chartClick1 = (e) => {
  console.log(' 我被执行了 我是百度 Echart', e)
  if (e) {
    emit('handelUpData')
    // createChart()
  }
}
// 暴露给父组件的方法
defineExpose({
  createChart,
})
// window['chartClick1'] = chartClick1;
</script>

<template>
  <div class="echart-box">
    <div class="chart" :id="chartData.name"></div>
    <el-button @click="chartClick1('1')" class="test-btn" v-if="false"
      >更新</el-button
    >
  </div>
</template>
``
<style lang="scss" scoped>
.echart-box {
  position: relative;
  width: 100%;
  height: calc(300px - 37px);
  .chart {
    width: 100%;
    height: 100%;
  }
  .test-btn {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
</style>
